<template>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">个人办公111run</el-menu-item>
          <el-menu-item index="2" @click="score">员工打分</el-menu-item>
          <i class="logout">{{username}}
            <el-button size="mini" @click="logout">注销</el-button>
          </i>

        </el-menu>
      </el-header>
      <el-container>
        <el-main>
          <el-card shadow="hover" class="box-card card1">
            <el-button style="margin-right: 50px" @click="startwork">上班打卡</el-button>
            <el-button @click="stopwork">下班打卡</el-button>
          </el-card>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <el-button style="float: left; padding: 3px 0" type="text">今日工作</el-button>
            </div>
            <el-checkbox-group v-model="checkList" class="check01">
              <el-checkbox label="进行电话测试"></el-checkbox>
              <el-checkbox label="重大事件通知"></el-checkbox>
              <el-checkbox label="督促运营商"></el-checkbox>
              <el-checkbox label="填写交接记录"></el-checkbox>
              <br>
            </el-checkbox-group>
            <el-button type="primary">提交</el-button>
          </el-card>
        </el-main>
        <el-aside width="300px">姓名：{{name}}
        </el-aside>

      </el-container>
    </el-container>
</template>

<script>
export default {
  name: 'main',
  data () {
    return {
      activeIndex2: '1',
      checkList: [],
      name:'wwww',
      username:'wwww'
    }
  },

  created() {
    this.curuser()
    console.log('cc')
  },

  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    score(){
      this.$router.push('/score')
    },


    curuser(){
      var that=this
      var currentUser = Bmob.User.current();
      if (currentUser) {
        // do stuff with the user
        console.log(currentUser.attributes)
        that.name=currentUser.attributes.name
        that.username=currentUser.attributes.username

      } else {
        console.log('bbb')

        // show the signup or login page
        this.$router.push('/login')
      }
    },
    logout(){
      Bmob.User.logOut();
      var currentUser = Bmob.User.current();  // this will now be null
      alert('注销成功')
      this.$router.push('/login')
    },
    startwork(){
      console.log('start')
      var date = new Date();
      console.log(date)
      var user = Bmob.User.current();
      var Attend = Bmob.Object.extend("Attend");
      var post = new Attend();
      post.set("startwork", date);
      post.set("user", user);
      post.set("name", user.attributes.name);
      post.save(null, {
        success: function(post) {
          // Find all posts by the current user
          var query = new Bmob.Query(Attend);
          query.equalTo("user", user);

        }
      });


    },
    stopwork(){
      console.log('stop')
      var date = new Date();

      var Attend = Bmob.Object.extend("Attend");
      var query = new Bmob.Query(Attend);

      query.get('6c11181e31', {
        success: function(gameScore) {
          // 回调中可以取得这个 GameScore 对象的一个实例，然后就可以修改它了
          gameScore.set('stopwork', date);
          gameScore.save();
          // The object was retrieved successfully.
        },
      });
    },




  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.el-header, .el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.box-card {
  /*width: 480px;*/
  margin: 30px;
}
.clearfix{
  clear: both;
  height: 26px;

}
.card1{
  /*height: 100px;*/
}
.check01{
  height: 60px;
}
.logout{
  float: right;
  color: #e2c539;
}
</style>
